<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Scratch VM Playground</title>
    <link rel="stylesheet" href="css/playground.css">
    <link rel="stylesheet" href="css/zenburn.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="vm-devtools">
        <!-- <div>
            Turbo: <input id='turbomode' type='checkbox' />
        </div>
        <div>
            Compatibility (30 TPS):  <input id='compatmode' type='checkbox' />
        </div>
        <div>
            sensor read time:  <input id='sensorDelay' type='input' />
        </div> -->
        <br />
        <ul id="playgroundLinks">
            <li><a id="renderexplorer-link" href="#">Renderer</a></li>
            <li><a id="threadexplorer-link" href="#">Threads</a></li>
            <li><a id="blockexplorer-link" href="#">Block Representation</a></li>
            <li><a id="importexport-link" href="#">Import/Export</a></li>
        </ul><br />
        <div id="tab-renderexplorer">
            <div id="toggleFlyout"></div>
            <div id="sensorBtn"></div>
            <canvas id="scratch-stage" style="width: 480px; height: 360px;"></canvas>

            <br />
            x: <input id='sinfo-x' />
            y: <input id='sinfo-y' /><br />
            dir: <input id='sinfo-direction' />
            rotation style: <input id='sinfo-rotationstyle' /><br />
            visible: <input id='sinfo-visible' />
            <button id='sinfo-post'>Post</button>
        </div>

        <div class="others">
            <div id="tab-threadexplorer">
                Thread explorer
                <pre id="threadexplorer"></pre>
            </div>
            <div id="tab-blockexplorer">
                Block explorer
                <pre id="blockexplorer"></pre>
            </div>
            <div id="tab-importexport">
                Import/Export<br />
                Project ID: <input id="projectId" value="119615668" />
                <button id="projectLoadButton">Load</button>
                <button id="createEmptyProject">New Project</button><br />
                <p>
                    <input type="button" value="Export to XML" onclick="toXml()">
                    &nbsp;
                    <input type="button" value="Import from XML" onclick="fromXml()" id="import">
                    <br /><br />
                    <textarea id="importExport"></textarea>
                </p>
            </div>

            <!-- <h2>Scratch VM Playground</h2> -->
            <select id="selectedTarget" multiple></select>
            <div id="projectButtons">
                <button id="greenflag">Run All</button>
                <button id="stopall">Stop</button>
            </div>
        </div>

        <div id="sensors">
            ultrasonic: <span class="ultrasonic"></span> <br/>
            lightSensor: <span class="lightsensor"></span> <br/>
            linefollower: <span class="linefollower"></span> <br/>
        </div>
    </div>

    <div id="blocks"></div>

    <!-- FPS counter, Syntax highlighter, Blocks, Renderer -->
    <script src="./vendors/socket.io-1.3.7.js"></script>
    <script src="./jquery-2.1.3.min.js"></script>
    <script src="./mblockly/hostInterface.js"></script>
    <script src="./mblockly/cache.js"></script>
    <script src="./mblockly/control.js"></script>
    <script src="./mblockly/action.js"></script>
    <script src="./vendor.js"></script>
    <!-- VM Worker -->
    <script src="./vm.js"></script>
    <!-- Playground -->
    <script src="./playground.js"></script>
    <script>

        var socket = io.connect('192.168.1.105:3000');

        socket.on('serial', function (data) {
            MBlockly.HostInterface.receiveData(data);
        });

        function fetchFile(xmlUrl) {
          try {
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open('GET', xmlUrl, false);
            xmlHttp.setRequestHeader('Content-Type', 'text/xml');
            xmlHttp.send('');
          } catch (e) {
            // Attempt to diagnose the problem.
            var msg = 'Error: Unable to load XML data.\n';
            if (window.location.protocol == 'file:') {
              msg += 'This may be due to a security restriction preventing\n' +
                  'access when using the file:// protocol.\n' +
                  'Use an http webserver, or a less paranoid browser.\n';
            }
            alert(msg + '\n' + e);
            return null;
          }
          return xmlHttp.responseText;
        }

        function toXml() {
            var output = document.getElementById('importExport');
            var xml = Blockly.Xml.workspaceToDom(workspace);
            output.value = Blockly.Xml.domToPrettyText(xml);
            output.focus();
            output.select();
          }

          function fromXml() {
            var input = document.getElementById('importExport');
            var xml = Blockly.Xml.textToDom(input.value);
            Blockly.Xml.domToWorkspace(workspace, xml);
          }
    </script>
</body>
</html>
